<html>

<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>30-上传SHP文件</title>
    <script src="../assets/ol/v9.2.4-package/dist/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../assets/ol/v9.2.4-package/ol.css">
    <link rel="stylesheet" href="../../../assets/css/index.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            top: 50px;
            bottom: 0;
            width: 100%;
        }

        #top-content {
            position: absolute;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
            color: #fff;
            text-align: center;
            font-size: 32px;
        }

        #top-content span {
            font-size: 32px;
        }

        .upload-shp {
            position: absolute;
            right: 50px;
            top: 80px;
            padding: 10px 20px;
            color: #fff;
            border-radius: 5px;
            border: 1px solid #50505040;
            background: linear-gradient(135deg, #c850c0, #4158d0);
        }

        .upload-shp:hover {
            cursor: pointer;
            filter: brightness(120%);
            background: linear-gradient(135deg, #eb3ddf, #0931fb);
        }

        .select-file {
            width: 180px;
        }
    </style>
</head>

<body>
<div id="top-content">
    <span>OpenLayers 上传Shapefile文件</span>
</div>
<div id="map"></div>
<div class="upload-shp">
    <input type="file" class="select-file" accept=".zip,.shp">
</div>
<script src="../../../assets/script/v9.2.4-common.js"></script>
<script src="../../../assets/script/shapefile.min.js"></script>
<script src="../../../assets/script/jszip.min.js"></script>
</body>
<script>
    loadTdtMapLayer();
    const inputEle = document.querySelector(".select-file")
    // 监听文件上传事件
    inputEle.addEventListener('change', evt => {
        const file = evt.target.files[0]
        const fileName = file.name
        const isZip = fileName.indexOf('.zip') > -1
        isZip ? uploadZip(file) : uploadShp(file)
    })

    // 监听上传完成事件
    inputEle.addEventListener('load', evt => {
        console.log("load事件参数：", evt)
    })

    // 监听上传错误事件
    inputEle.addEventListener('error', evt => {
        console.log("error事件参数：", evt)
    })

    // 上传Shp压缩包
    function uploadZip(data) {
        const zip = new JSZip()
        zip.loadAsync(data).then(file => {
            const fileList = Object.keys(file.files)
            const regExp = new RegExp(/\S\.shp$/)
            const shpFile = fileList.find(file => regExp.test(file))
            zip.file(shpFile).async('arraybuffer')
                .then(content => {
                    openShapefile(content)
                })
        }).catch(err => {
            // '请上传正确格式的文件！'
            console.error(err)
        })
    }

    // 上传Shp文件
    function uploadShp(file) {
        const reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = (e) => {
            openShapefile(e.target.result)
        }
    }

    let vectorLayer = null

    // 读取shp文件
    async function openShapefile(content) {
        const data = await shapefile.read(content)
        addGeoJSON2Map(data, map)
    }

</script>

</html>